<template>
  <header class="navbar">
    <div class="container-fluid">
      <button class="navbar-toggler hidden-lg-up" type="button">&#9776;</button>
      <a class="navbar-brand" ui-sref="app.main"></a>
      <ul class="nav navbar-nav hidden-md-down">
        <li class="nav-item">
          <a class="nav-link navbar-toggler layout-toggler" href="#">&#9776;</a>
        </li>

        <li class="nav-item px-1">
          <a class="nav-link" route-href="route: dashboard;">Dashboard</a>
        </li>
        <li class="nav-item px-1">
          <a class="nav-link" route-href="route: user;">Users</a>
        </li>
        <li class="nav-item px-1">
          <a class="nav-link" route-href="route: settings;">Settings</a>
        </li>
      </ul>
      <ul class="nav navbar-nav float-xs-right hidden-md-down">
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="icon-bell"></i><span class="tag tag-pill tag-danger">5</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="icon-list"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="icon-location-pin"></i></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
             aria-expanded="false">
            <img src="../../img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
            <span class="hidden-md-down">admin</span>
          </a>
          <div class="dropdown-menu dropdown-menu-right">

            <div class="dropdown-header text-xs-center">
              <strong>Account</strong>
            </div>

            <a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span
              class="tag tag-info">42</span></a>
            <a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span
              class="tag tag-success">42</span></a>
            <a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span
              class="tag tag-danger">42</span></a>
            <a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comment<span
              class="tag tag-warning">42</span></a>

            <div class="dropdown-header text-xs-center">
              <strong>Settings</strong>
            </div>

            <a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>
            <a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Setting</a>
            <a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="tag tag-default">42</span></a>
            <a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="tag tag-primary">42</span></a>
            <div class="divider"></div>
            <a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock account</a>
            <a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link navbar-toggler aside-toggle" href="#">&#9776;</a>
        </li>

      </ul>
    </div>
  </header>
</template>
